<template>
	<view style="background-color: #fff;height: 100%;">
		
		<view v-for="(item,index) in data">
			<view v-if="item.is_default == 1" style="padding: 10px;border-bottom: 1px solid #eee;">
				<uni-row>
				    <uni-col :span="3">
						<view style="line-height: 103px;">
							<radio :checked="true"></radio>
						</view>
						
				    </uni-col>
				    <uni-col :span="17">
				        <uni-row style="padding: 10px 0;">
							<uni-col :span="4">
								<text>{{item.realname}}</text>
							</uni-col>
							<uni-col :span="20">
								<text>{{item.mobile_number}}</text>
								<text style="background-color: red;color: #fff;border-radius: 5px;font-size: 12px;padding: 2px 10px;">默认</text>
							</uni-col>
						</uni-row>
						<view style="color: gray;padding: 10px 0;">
							{{item.region}}{{item.address}}
						</view>
				    </uni-col>
					<uni-col :span="4">
						<view style="line-height: 103px;text-align: right;">
							<view style="color: #007AFF;" @click="edit(item)">修改</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
			
			<view v-else style="padding: 10px;border-bottom: 1px solid #eee;">
				<uni-row>
				    <uni-col :span="20">
				        <uni-row style="padding: 10px 0;">
							<uni-col :span="4">
								<text>{{item.realname}}</text>
							</uni-col>
							<uni-col :span="20">
								<text>{{item.mobile_number}}</text>
							</uni-col>
						</uni-row>
						<view style="color: gray;padding: 10px 0;">
							{{item.region}}{{item.address}}
						</view>
				    </uni-col>
					<uni-col :span="4">
						<view style="line-height: 103px;text-align: right;">
							<view style="color: #007AFF;" @click="edit(item)">修改</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		
		
		
		<view style="padding: 10px;">
			<button type="warn" @click="add()">添加新地址</button>
		</view>
		
		<uni-popup ref="popup" type="share" :animation="false">
			
			<view style="width: 100%;background-color: #fff;">
				<!-- <view style="padding: 15px 10px;">地址</view> -->
				<view style="padding: 10px;">
					<input style="border: none;background-color: #eee;padding:10px 5px;" 
					placeholder="姓名" v-model="post_data.realname"/>
				</view>
				<view style="padding: 10px;">
					<input type="number" style="border: none;background-color: #eee;padding:10px 5px;" 
					placeholder="手机号码" v-model="post_data.mobile_number" />
				</view>
				<view style="padding: 10px;">
					<input style="border: none;background-color: #eee;padding:10px 5px;" 
					placeholder="所在地区" v-model="post_data.region" />
				</view>
				<view style="padding: 10px;">
					<input style="border: none;background-color: #eee;padding:10px 5px;" 
					placeholder="街道小区门牌等详细地址" v-model="post_data.address" />
				</view>
				<view style="padding: 10px;">
					<checkbox-group @change="checkboxChange">
						<checkbox style="transform:scale(0.7)" value="1" :checked="post_data.is_default == 1" />设为默认地址
					</checkbox-group>
				</view>
				<view style="padding: 10px;">
					<button type="warn" @click="postAddress()">保存地址</button>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				post_data: {
					id: 0,
					user_id: 0,
					realname: '',
					mobile_number: '',
					region: '',
					address: '',
					is_default: 1,
				}
			}
		},
		onLoad() {
			this.getAddress();
		},
		methods: {
			getAddress() {
				let that = this;
				this.$api.getAddress({uid: this.$common.getUser()}).then(res => {
					that.data = res.data;
				})
			},
			edit(item) {
				this.post_data = item;
				this.$refs.popup.open();
			},
			add() {
				this.post_data = {
					id: 0,
					user_id: 0,
					realname: '',
					mobile_number: '',
					region: '',
					address: '',
					is_default: 1,
				};
				this.$refs.popup.open();
			},
			postAddress() {
				this.post_data.user_id = this.$common.getUser();
				
				let that = this;
				this.$api.postAddress({UserAddress: this.post_data}).then(res => {
					if (res.meta.code == '000') {
						that.$refs.popup.close();
						that.getAddress();
					}
				})
			},
			checkboxChange(e) {
				if (e.detail.value != '') {
					this.post_data.is_default = 1;
				} else {
					this.post_data.is_default = 0;
				}
			}
		}
	}
</script>

<style>
</style>
